<template>
  <!-- 骨架屏 -->
  <view v-if="loading">
    <uv-skeletons
      rows="4"
      title
      :loading="loading"
      :animate="true"
      avatar
      avatar-shape="square"
      avatar-size="80"
    />
  </view>
  <view class="grid grid-cols-2 grid-rows-2 mx-4 my-4 gap-4">
    <!-- 左上 -->
    <view
      class="relative row-span-1 h-[150rpx]"
      @click="go(leftTop)"
    >
      <image class="absolute inset-0 h-full w-full" mode="scaleToFill" :src="leftTop?.bback || ''" />
      <view class="absolute inset-0 flex flex-row items-center justify-center p-4">
        <view class="flex flex-col">
          <text class="text-[32rpx] text-[#333] font-medium">
            {{ leftTop?.bname || '' }}
          </text>
          <text class="mt-1 text-[28rpx] text-[#666]">
            {{ leftTop?.btitle || '' }}
          </text>
        </view>

        <image class="ml-auto h-6 w-6" :src="leftTop?.bicon || ''" mode="aspectFit" />
      </view>
    </view>

    <!-- 右侧（占 2 行） -->
    <view
      class="relative row-span-2"
      @click="go(right)"
    >
      <image class="absolute inset-0 h-full w-full" mode="scaleToFill" :src="right?.bback || ''" />
      <view class="absolute inset-0 flex flex-col items-center justify-between p-4">
        <image class="h-6 w-12 object-contain" src="/static/home/icon_ask_response.png" mode="aspectFit" />
        <view class="w-full flex flex-row items-center justify-between">
          <view class="flex flex-col">
            <text class="text-[32rpx] text-[#333] font-medium">{{ right?.bname || '' }}</text>
            <text class="mt-1 text-[28rpx] text-[#666]">{{ right?.btitle || '' }}</text>
          </view>

          <image class="h-6 w-6 object-contain" :src="right?.bicon || ''" mode="aspectFit" />
        </view>

        <view v-if="right?.blabel" class="flex flex-row">
          <view class="relative flex flex-row items-center justify-between px-6 py-2">
            <image
              class="absolute inset-0 h-full w-full animate-pulse object-contain"
              src="/static/home/home_go_ask.png"
              mode="aspectFit"
            />

            <view class="relative flex flex-row items-center">
              <text class="text-[20rpx] text-white font-medium">
                {{ $t('goConsult') }}
              </text>
              <image
                class="ml-1.5 h-2.5 w-2.5 object-contain"
                src="/static/home/icon_ask_go.png"
                mode="aspectFit"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 左下 -->
    <view
      class="relative row-span-1"
      @click="go(leftBottom)"
    >
      <image class="absolute inset-0 h-full w-full" mode="scaleToFill" :src="leftBottom?.bback || ''" />

      <view class="absolute inset-0 flex flex-row items-center justify-center p-4">
        <view class="flex flex-col">
          <text class="text-[32rpx] text-[#333] font-medium">
            {{ leftBottom?.bname || '' }}
          </text>
          <text class="mt-1 text-[28rpx] text-[#666]">
            {{ leftBottom?.btitle || '' }}
          </text>
        </view>

        <image class="ml-auto h-6 w-6" :src="leftBottom?.bicon || ''" mode="aspectFit" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { HomeBannerItem } from '@/api/types/home'

const props = defineProps<{
  leftTop?: HomeBannerItem
  right?: HomeBannerItem
  leftBottom?: HomeBannerItem
  loading?: boolean
}>()

// 背景由 bback 决定
function buildBg(item?: HomeBannerItem) {
  if (!item?.bback)
    return {}
  return {
    backgroundImage: `url(${item.bback})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  }
}

// 跳转
function go(item?: HomeBannerItem) {
  if (!item?.urlPath)
    return
  uni.navigateTo({ url: item.urlPath })
}
</script>
